import { reactive, ref } from "vue";
import { ElForm } from "element-plus";
export const useModifyPassword = () => {
  //修改密码对话框
  const modifyPassowrdDialogVisible = ref(false);
  //关闭修改对话框
  const closeModifyPasswordDialog = () => {
    //表单重置
    modifyPasswordFormRef.value!.resetFields();
    //清楚校验信息
    modifyPasswordFormRef.value!.clearValidate();
    modifyPassowrdDialogVisible.value = false;
  };
  //修改密码表单
  const modifyPasswordFormRef = ref<Nullable<typeof ElForm>>(null);
  const modifyPasswordForm = reactive({
    password_old: "",
    password: "",
    password_confirm: "",
  });
  const validateConfirmPassword = (rule: any, value: any, callback: any) => {
    if (modifyPasswordForm.password !== value) {
      callback(new Error("2次密码不一致"));
    } else {
      callback();
    }
  };
  const modifyPasswordRules = {
    password_old: {
      required: true,
      message: "请输入原始密码",
    },
    password: [
      {
        required: true,
        message: "请输入新密码",
      },
      { min: 8, max: 32, message: "密码长度为8-32位" },
    ],
    password_confirm: [
      {
        required: true,
        message: "请输入确认密码",
      },
      { min: 8, max: 32, message: "密码长度为8-32位" },
      {
        validator: validateConfirmPassword,
        trigger: "blur",
      },
    ],
  };

  return {
    modifyPasswordRules,
    modifyPasswordFormRef,
    closeModifyPasswordDialog,
    modifyPasswordForm,
    modifyPassowrdDialogVisible,
  };
};
